<template>
	<div class="coupon" id="coupon">
        <div class="coupon_scroll_box" id="wrapper">
            <div class="noMsgTip" v-if="couponList.length<=0">暂无优惠券信息</div>
            <div id="scroller">
                <ul id="thelist">
                    <li class="coupon_item" v-for="(item,idx) in couponList">
                        <div class="info-box clearfix">
                            <div  class="info"  @click="couponInstanceFn(item,idx)">
                               <div class="img flex flex-align-center flex-pack-center left">
                                   <div class="img-inner">
                                       <img :src="item.logoURL" v-if="item.logoURL">
                                   </div>
                               </div>
                               <div class="text left">
                                    <div class="title title1">
                                        <span class="type" v-text="item.title"></span>
                                    </div>
                                    <div class="title title2">
                                        <span class="coupon-type" v-text="couponType[item.type]"></span>
                                        <span class="product-name" v-text="item.productName"></span>
                                    </div>
                                    <div class="expire-days">
                                        <span>有效日期</span>
                                        <!-- <span v-text="item.expireDays+'天'" style="color:#e66a6a;"></span> -->
                                        <span style="color:#e66a6a;">{{item.startTime | numberToDate('')}}</span>
                                        <span>~</span>
                                        <span style="color:#e66a6a;">{{item.endTime | numberToDate('')}}</span>
                                    </div>
                               </div> 
                           </div>
                           <div class="use-rules" @click="()=>{$router.push('couponDetail/'+item.id)}">
                                <div class="inner1">
                                   <span v-text="'使用规则：'+item.notice"></span>
                                   <i class="iconfont icon-jiantou"></i>
                                </div>
                           </div>
                        </div>
                        <div class="distribute flex flex-align-center flex-pack-right" v-if="distributeBtn==idx">
                            <button type="button" @click="()=>{distributeBtn=-1}" class="cancle">取消</button>
                            <button type="button" @click="distributeFn(item,idx)">派发</button>
                        </div>
                    </li>
                </ul>
                <div id="pullUp" :style="{display:(couponList.length>=pageSize?'block':'none')}">
                <!-- <div id="pullUp"> -->
                    <span class="pullUpLabel">上拉加载更多</span>
                </div>
            </div>
        </div>

        <!-- 派发优惠券二维码 -->
        <div class="vipQrcode" v-if="nowSelCoupon" :style="{display:isqrcode?'block':'none'}" @click="closeCouponCode">
            <!-- <div class="position-middle-center content"> -->
                <div class="form-wrap" @click.stop="">
                    <div class="form-item">
                        <!-- <div class="form-name">已选择优惠券</div> -->
                        <div class="item-cont">
                            <span class="coupon-name">{{nowSelCoupon.title}}</span>
                            <div class="tip" style="color:#999;">
                                <span>优惠券类型：<b>{{couponType[nowSelCoupon.type]}}</b></span>
                                <div>有效日期：<b>{{nowSelCoupon.startTime | numberToDate('')}}~{{nowSelCoupon.endTime | numberToDate('')}}</b></div>
                                <span>抵扣商品：<b>{{nowSelCoupon.productName}}</b></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-name">*请选择优惠券数量</div>
                        <div class="item-cont">
                            <select name="" id="" v-model="count">
                                <option value="" key="-1">请选择</option>
                                <option :value="it" v-for="it in 30" :key="it">{{it}}张</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-name">*输入手机号选择会员</div>
                        <div class="item-cont">
                            <input type="tel" v-model="vipMobile" placeholder="请输入手机号"/>
                            <div class="search-list">
                                <ul>
                                    <li v-for="(it,ind) in vipPhoneList" @click.stop="selVip(it)" :key="ind"><span v-if="it.name">{{it.name}}</span><span v-if="it.mobile">({{it.mobile}})</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-item" v-if="nowSelVips&&Array.isArray(nowSelVips)&&nowSelVips.length">
                        <div class="form-name">已选择会员</div>
                        <div class="item-cont" style="text-align:center;">
                            <span class="item" v-for="(it,ind) in nowSelVips" :key="it.id">
                                <div class="name-wrap">
                                    <template v-if="it.name">{{it.name}}</template>
                                    <template v-if="it.mobile">({{it.mobile}})</template>
                                </div>
                                <span class="close" @click.stop="delVip(it,ind)">&times;</span>
                            </span>
                            <!-- <input type="text" v-model="form.name" placeholder="请输入姓名"/> -->
                        </div>
                    </div>
                    <button class="sub-btn" @click.stop="submitVip">确定</button>
                </div>
                <!-- <div id="couponCode" class="qrcode-border"></div>
                <p class="add-text">扫码领取优惠券</p> -->
            <!-- </div> -->
        </div>
	</div>
</template>

<script type="text/javascript">
import {API_BASE_URL} from "./../../urlConfig/index";

export default {
  	data(){ 
  		return{
            nowSelCoupon:null,
            form:{},
            count:"",
            couponList:[],
            curStoreId: '',
            curPage: 0,
            pageSize: 5,
            total: 0,
            couponType:{
                "GET_ITEM_FREE":'商品抵用券',
                "REDUCE":"代金券"
            },
            distributeBtn:-1,
            isqrcode: false, // 
            couponTimer: '',
            queryId: '', // 轮询id
            userName:"",
            vipMobile:"",
            vipPhoneList:[],
            nowSelVips:[],
  		}
  	},
    watch:{
        vipMobile(val){
            if ( !(val.replace(/\s/g,'')) ) {
                this.vipPhoneList = [];
                return;
            }
            if(val.length<4){
                return;
            }
            this.$http.get(API_BASE_URL+'v1/member/members-search?storeId='+this.curStoreId+'&q='+val).then((res)=>{
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i].amount = res.data[i].amount.toFixed(2);
                }
                this.vipPhoneList = res.data;
            })
        }
    },
  	methods:{
        submitVip(){
            if(!this.count){
                this.$message({
                    message: "请选择优惠券数量",
                    customClass: 'error'
                });
                return;
            }
            if(!this.nowSelVips || !Array.isArray(this.nowSelVips) || !this.nowSelVips.length){
                this.$message({
                    message: "请选择会员",
                    customClass: 'error'
                });
                return;
            }
            let memeberIds = [];
            this.nowSelVips.forEach(it=>{
                memeberIds.push(it.memberId);
            })
            this.$http({
                url:"distribute-coupon",
                method:"POST",
                data:{
                    couponId:this.nowSelCoupon.id,
                    distributeType:"SINGLE",
                    memeberIds,
                    qty:this.count,
                    storeId:this.curStoreId
                }
            }).then(res=>{
                this.isqrcode = false;
                this.nowSelVips = [];
                this.nowSelCoupon = null;
                this.count = "";
                this.$message({
                    message: "派发成功",
                    customClass: 'success'
                });
            })
        },
        // 
        selVip(item){
            let nowSelVips = JSON.parse(JSON.stringify(this.nowSelVips));
            let flag = false;
            if(nowSelVips && Array.isArray(nowSelVips)){
                nowSelVips.forEach(it=>{
                    if(it.id == item.id){
                        flag = true;
                    }
                })
            }
            if(!flag){
                nowSelVips.push(item);
            }
            this.nowSelVips = nowSelVips;
            this.vipMobile = "";
        },
        delVip(item,index){
            let nowSelVips = JSON.parse(JSON.stringify(this.nowSelVips));
            if(nowSelVips && Array.isArray(nowSelVips)){
                nowSelVips.splice(index,1);
            }
            this.nowSelVips = nowSelVips;
        },
        //绑定优惠券和会员
        couponInstanceFn(item,idx){
            if(this.distributeBtn == idx){
                this.distributeBtn = -1;
            }else {
                this.distributeBtn = idx;
            }
        },
        //派发
        distributeFn(item,idx){
            this.isqrcode = true;
            this.nowSelCoupon = item;
            return;
            let body ={
                couponId:item.id,
            }
            this.$http.post("coupon-instance",body).then((res)=>{
                this.isqrcode = true;
                this.queryId = res.data.couponInstanceId;
                setTimeout(()=>{
                    $('#couponCode')[0].innerHTML='';
                    let couponCode = new QRCode("couponCode", {
                        text: res.data.url,
                        colorDark : "#000000",
                        colorLight : "#ffffff",
                        height: 200,
                        width: 200,
                        correctLevel : QRCode.CorrectLevel.H
                    });
                },200)
                this.couponTimer = setInterval(()=>{
                    this.couponQuery();
                },2000)
            }).catch((err)=>{})

        },
        // 优惠券轮询
        couponQuery: function () {
            this.$http.get(this.queryId+'/query-instance').then((res)=>{
                if ( res.data.code == 200 ) {
                    clearInterval(this.couponTimer);
                    this.$message({
                        message: "派发成功！",
                        customClass: 'success'
                    });
                    this.distributeBtn = -1;
                    this.isqrcode = false;
                }
            })
        },
        // 关闭领取窗口
        closeCouponCode: function () {
            this.isqrcode = false;
            clearInterval(this.couponTimer);
        }
  	},
    created: function () {
        this.curStoreId = localStorage.getItem('storeId');
    },
    mounted(){
          m$.setTitle('派发优惠券');
        let userName = localStorage.getItem("phone");
        this.userName = userName;
        this.$http.get('coupon?storeId='+this.curStoreId+'&userName='+userName+'&page='+this.curPage+'&size='+this.pageSize).then((res)=>{
            this.couponList = res.data.content;
            $(document).ready(()=>{
                let myScroll;
                let pullUpEl;
                let pullUpOffset;
                let generatedCount = 0;
                let that = this;
                let isEnd = false;
                let getDataBtn = true;
                //动画部分
                setTimeout(()=>{
                    pullUpEl = document.getElementById('pullUp');   
                    pullUpOffset = pullUpEl.offsetHeight;
                    myScroll = new iScroll('wrapper', {
                        useTransition: true,
                        topOffset: 0,
                        onRefresh: function () {
                            if (pullUpEl.className.match('loading')) {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
                                if(isEnd){
                                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '亲，已经到底啦！';
                                }
                            }
                        },
                        onScrollMove: function () {
                            if ( that.couponList.length < that.pageSize ) {
                                return;
                            }
                            if (this.y < (this.maxScrollY - 20) && !pullUpEl.className.match('flip')) {
                                pullUpEl.className = 'flip';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新';
                                this.maxScrollY = this.maxScrollY;
                            } else if (this.y > (this.maxScrollY + 20) && pullUpEl.className.match('flip')) {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                                this.maxScrollY = pullUpOffset;
                            }
                        },
                        onScrollEnd: function () {
                            if (pullUpEl.className.match('flip')&&that.couponList.length>=that.pageSize) {
                            // if (pullUpEl.className.match('flip')) {
                                pullUpEl.className = 'loading';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';               
                                pullUpAction(); // Execute custom function (ajax call?)
                            }
                        }
                    });
                    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);//阻止冒泡
                    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 0); }, false);
                }, 500);

                //上拉加载更多数据
                function pullUpAction () {
                    if ( !getDataBtn ) {
                        return;
                    }
                    getDataBtn = false;
                    that.curPage++;
                    that.$http.get('coupon?storeId='+that.curStoreId+'&userName='+that.userName+'&page='+that.curPage+'&size='+that.pageSize).then((res)=>{
                        that.couponList = that.couponList.concat(res.data.content); // 拼接数组
                        //数据没有更多了
                        if(res.data.content.length==0){
                            isEnd = true;
                        }else {
                            isEnd = false;
                        }
                        setTimeout(()=>{
                            getDataBtn = true;
                            myScroll.refresh();
                        },300)
                    }).catch(()=>{
                        getDataBtn = true;
                    })
                }
            });
        })
  	}
}
</script>
<style lang="scss" scoped>
@import "../../../static/css/common.scss";
	@import "coupon";
</style>

 